import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

import './index.css'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// hooks 一定要写在函数组件中
function App() {
  // useState 用来定义一个状态变量用的
  // 返回值是一个数组，数组中有两个东西
  // 第一个是变量，第二个是修改变量的方法
  const [flag, setFlag] = useState(true)

  return <>
    <h1 className={flag ? 'active' : ''} onClick={() => {
      setFlag(!flag)
    }}>
      组件内容 1 + 1 {1 + 1}
    </h1>
  </>
}

root.render(
  <App />
);